<template>
  <div class="app-container" @click="hideContextMenu">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="设备品牌" prop="gasBrand">
        <el-input
          v-model="queryParams.gasBrand"
          placeholder="请输入设备品牌"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备型号" prop="gasModel">
        <el-input
          v-model="queryParams.gasModel"
          placeholder="请输入设备型号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="gasState">
        <el-select
          v-model="queryParams.gasState"
          placeholder="设备状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.hmy_gas_state"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改
              </el-button>
            </el-col>-->
      <!--      <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--    去掉 列表形式 转换成盒子模块形式-->
    <el-row :gutter="20">
      <el-col :span="1" style="margin-top: 100px;margin-left: 20px">
        <svg class="icon" height="100" p-id="7126" t="1708502749876" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goleft">
          <path
            d="M745.09774 1024L232.934734 512.163005 745.09774 0l45.967526 45.967526-465.869468 466.195479L791.065266 978.032474l-45.967526 45.967526z"
            fill="#dbdbdb" p-id="7127"></path>
        </svg>
      </el-col>
      <el-col :span="20">
        <div class="scroll-container" @wheel="handleWheel">
          <el-row :gutter="20" class="table-body" style="margin-left: 20px;margin-right:20px ">
            <el-col v-for="(item, index) in gasList" :key="index"
                    :span="5"
                    class="function-card emessage-div"
                    style="margin-top: 20px"

            >
              <div @click="showDetails(item)"
                   @contextmenu.prevent="$event.preventDefault(); showContextMenu($event, item)">
                <el-card :body-style="{ padding: '0px' }" class="parent-icon" shadow="hover">

                  <i v-if="item.gasState==='1'" class="el-icon-success green-icon" title="运行"
                     @click.stop="icoeUp(item)"></i>
                  <!-- 否则，显示el-icon-circle-cross图标 -->
                  <!--            <i v-else-if="item.fansState==='2'" class="el-icon-warning orange-icon" @click.stop="icoeUp(item)"
                                 title="故障"></i>-->
                  <i v-else-if="item.gasState==='2'" class="el-icon-error rea-icon" title="关闭"
                     @click.stop="icoeUp(item)"></i>


                  <!--              <img src="/src/assests/images/scrape.png" height="140"/>-->
                  <svg class="icon" height="140" p-id="5076" t="1708425947349"
                       version="1.1"
                       viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M778.81344 433.52064a285.61408 285.61408 0 1 0-22.528 111.4112 284.71296 284.71296 0 0 0 22.528-111.4112z m-286.3104 273.85856a273.85856 273.85856 0 1 1 273.89952-273.85856 273.85856 273.85856 0 0 1-273.89952 273.85856zM949.61664 236.29824a25.76384 25.76384 0 0 0-25.72288 25.72288v10.24h9.99424v68.15744h-81.92a4.83328 4.83328 0 0 0-4.83328 4.83328v84.50048a4.83328 4.83328 0 0 0 4.83328 4.87424h114.11456V272.26112h9.54368V262.144a25.72288 25.72288 0 0 0-26.0096-25.84576z"
                      p-id="5077"></path>
                    <path
                      d="M985.9072 279.79776v-16.384a36.29056 36.29056 0 1 0-72.58112 0v16.384h12.288v21.83168h-11.01824a1.31072 1.31072 0 0 0-1.26976 1.2288v21.46304h-100.7616a336.44544 336.44544 0 0 0-81.05984-129.76128 61.80864 61.80864 0 0 0-2.90816-2.78528l36.864-70.61504a4.096 4.096 0 0 0-1.26976-5.16096l-46.16192-33.30048a4.096 4.096 0 0 0-5.20192 0.45056l-54.51776 55.7056a339.02592 339.02592 0 0 0-331.776 0.32768L271.52384 83.1488a4.096 4.096 0 0 0-5.28384-0.45056l-46.03904 33.30048a4.096 4.096 0 0 0-1.18784 5.16096l36.864 71.10656a40.7552 40.7552 0 0 0-2.33472 2.29376 335.872 335.872 0 0 0-80.93696 129.72032H58.61376v-1.67936a9.70752 9.70752 0 0 0-9.46176-9.6256H18.96448a9.6256 9.6256 0 0 0-9.6256 9.6256v129.88416a9.54368 9.54368 0 0 0 9.6256 9.54368H49.152a9.6256 9.6256 0 0 0 9.6256-9.54368V450.56h96.29696a335.38048 335.38048 0 0 0 98.54976 221.83936c0.90112 0.90112 1.88416 1.88416 2.8672 2.74432l-37.4784 72.37632a4.096 4.096 0 0 0 1.18784 5.16096l46.03904 33.30048a4.096 4.096 0 0 0 5.28384-0.45056l55.74656-57.05728a331.776 331.776 0 0 0 85.52448 33.5872v54.39488a9.58464 9.58464 0 0 0 8.68352 9.58464v32.19456a9.66656 9.66656 0 0 0 9.66656 9.6256h0.57344v37.72416a9.6256 9.6256 0 0 0 9.6256 9.6256h19.98848v12.86144H458.752a7.86432 7.86432 0 0 0-7.86432 7.90528v46.53056a7.82336 7.82336 0 0 0 7.86432 7.82336h67.7888a7.86432 7.86432 0 0 0 7.90528-7.82336V935.936a7.94624 7.94624 0 0 0-7.90528-7.90528h-2.58048v-12.86144h19.98848a9.6256 9.6256 0 0 0 9.66656-9.6256v-37.72416h0.57344a9.66656 9.66656 0 0 0 9.6256-9.6256v-32.19456a9.58464 9.58464 0 0 0 8.72448-9.58464V761.856a334.76608 334.76608 0 0 0 84.95104-33.30048l55.21408 56.97536a4.096 4.096 0 0 0 5.20192 0.45056l46.03904-33.30048a4.096 4.096 0 0 0 1.26976-5.16096l-37.2736-71.68c1.18784-1.06496 2.33472-2.17088 3.44064-3.2768a335.62624 335.62624 0 0 0 98.7136-222.0032h154.54208a1.26976 1.26976 0 0 0 1.26976-1.2288V302.85824a1.31072 1.31072 0 0 0-1.26976-1.2288h-11.01824v-21.83168z m-273.57184-166.37952a14.99136 14.99136 0 1 1 3.39968 20.97152 14.9504 14.9504 0 0 1-3.39968-20.97152zM251.00288 110.05952a15.03232 15.03232 0 1 1-3.35872 20.97152 14.99136 14.99136 0 0 1 3.35872-20.97152z m-108.21632 319.11936a9.78944 9.78944 0 0 1-9.78944 9.78944H52.224v4.75136a8.192 8.192 0 0 1-8.192 8.192H24.04352a8.192 8.192 0 0 1-8.192-8.192V331.3664a8.192 8.192 0 0 1 8.192-8.192h19.8656a8.192 8.192 0 0 1 8.192 8.192v4.5056h80.896a9.8304 9.8304 0 0 1 9.78944 9.78944z m129.18784 326.00064a14.99136 14.99136 0 1 1-3.35872-20.93056 14.99136 14.99136 0 0 1 3.35872 20.93056z m294.912 58.1632a9.4208 9.4208 0 0 1-8.56064 9.4208h1.39264-3.39968v31.00672c0 4.99712-5.40672 8.84736-10.48576 9.4208v37.0688a9.46176 9.46176 0 0 1-9.46176 9.50272h-16.384v22.77376h0.2048a8.192 8.192 0 0 1 8.192 8.192v36.12672a8.192 8.192 0 0 1-8.192 8.192h-55.05024a8.192 8.192 0 0 1-8.192-8.192v-36.00384a8.192 8.192 0 0 1 8.192-8.192h0.45056v-22.77376h-16.75264a9.4208 9.4208 0 0 1-9.4208-9.50272v-37.0688c-4.99712-0.57344-10.89536-4.3008-10.89536-9.4208v-31.45728c-4.42368-1.06496-9.8304-4.62848-9.8304-9.17504v-50.13504l3.31776 0.73728v49.47968c0 2.94912 5.07904 5.77536 8.192 6.10304h1.59744V853.72928c0 2.74432 4.66944 6.18496 8.68352 6.18496h2.21184v40.30464a6.144 6.144 0 0 0 6.10304 6.18496h20.0704v29.36832h-3.76832a4.83328 4.83328 0 0 0-4.79232 4.83328v36.12672a4.83328 4.83328 0 0 0 4.79232 4.83328H520.192a4.87424 4.87424 0 0 0 4.83328-4.83328v-35.88096a4.87424 4.87424 0 0 0-4.83328-4.83328h-3.76832v-29.36832h19.61984a6.18496 6.18496 0 0 0 6.18496-6.18496V860.16h2.08896c4.096 0 8.3968-3.2768 8.3968-6.18496v-32.48128c0-1.55648 1.31072-1.67936 3.2768-1.8432h1.55648a6.02112 6.02112 0 0 0 5.61152-6.10304v-49.88928l3.2768-0.73728z m169.90208-75.69408a14.99136 14.99136 0 1 1-20.8896-3.39968 14.90944 14.90944 0 0 1 20.72576 3.39968z m-11.18208-65.536a334.848 334.848 0 0 1-71.43424 53.248 332.1856 332.1856 0 0 1-161.42336 41.65632 334.848 334.848 0 0 1-79.79008-9.6256 330.79296 330.79296 0 0 1-82.28864-32.3584 336.81408 336.81408 0 0 1-71.10656-53.248A332.14464 332.14464 0 0 1 159.744 450.56a299.008 299.008 0 0 1-0.45056-17.16224A332.14464 332.14464 0 0 1 258.4576 196.28032a335.872 335.872 0 0 1 71.2704-53.57568 333.45536 333.45536 0 0 1 325.14048-0.32768 330.5472 330.5472 0 0 1 71.43424 53.57568 333.04576 333.04576 0 0 1 81.3056 128.36864 334.76608 334.76608 0 0 1 18.26816 109.24032c0 5.7344 0 11.4688-0.45056 17.12128a331.776 331.776 0 0 1-99.98336 221.30688z m244.81792-395.18208v159.45728a3.6864 3.6864 0 0 1-3.15392 4.096h-115.58912a10.52672 10.52672 0 0 1-10.52672-10.52672V345.25184a10.56768 10.56768 0 0 1 10.52672-10.52672h77.57824V276.80768h-9.91232V262.144a30.26944 30.26944 0 0 1 60.53888 0v14.78656z"
                      p-id="5078"></path>
                    <path
                      d="M132.99712 340.62336H48.3328V331.3664a4.46464 4.46464 0 0 0-4.42368-4.42368H24.04352a4.42368 4.42368 0 0 0-4.42368 4.42368v112.31232a4.42368 4.42368 0 0 0 4.42368 4.42368h19.8656a4.42368 4.42368 0 0 0 4.42368-4.42368v-9.25696h84.66432a5.20192 5.20192 0 0 0 5.24288-5.20192V345.86624a5.24288 5.24288 0 0 0-5.24288-5.24288zM671.744 202.99776a63.56992 63.56992 0 0 0 13.96736-32.11264l-7.33184-5.20192a320.1024 320.1024 0 0 0-54.8864-30.72 61.44 61.44 0 0 1-12.53376 31.70304 292.29056 292.29056 0 0 1 60.78464 36.33152zM795.15648 479.232a55.9104 55.9104 0 0 1-13.80352-3.11296 293.10976 293.10976 0 0 1-19.53792 70.32832 52.34688 52.34688 0 0 0 12.288 6.63552 305.5616 305.5616 0 0 0 21.05344-73.85088zM761.856 321.08544h0.57344a61.0304 61.0304 0 0 0 28.672-18.67776 324.85376 324.85376 0 0 0-34.89792-60.6208 57.71264 57.71264 0 0 1-29.57312 17.2032 259.80928 259.80928 0 0 1 35.2256 62.09536zM793.27232 397.312l3.11296 0.4096a287.17056 287.17056 0 0 0-3.11296-20.48 297.28768 297.28768 0 0 0-16.384-56.44288 53.61664 53.61664 0 0 1-12.98432 5.44768 270.5408 270.5408 0 0 1 17.6128 67.54304l1.10592 0.53248a50.13504 50.13504 0 0 0 10.6496 2.99008zM743.09632 245.3504a55.9104 55.9104 0 0 0 9.4208-8.51968 322.9696 322.9696 0 0 0-61.80864-62.0544 65.536 65.536 0 0 1-3.56352 13.18912 319.8976 319.8976 0 0 1 55.95136 57.38496zM381.70624 163.4304a293.96992 293.96992 0 0 1 74.50624-19.53792 58.28608 58.28608 0 0 1-4.99712-13.43488 305.68448 305.68448 0 0 0-76.5952 20.76672 41.65632 41.65632 0 0 0 7.08608 12.20608zM615.26016 145.24416a61.15328 61.15328 0 0 0 2.29376-12.82048 322.02752 322.02752 0 0 0-83.10784-22.07744 59.1872 59.1872 0 0 1 1.39264 12.86144 306.7904 306.7904 0 0 1 79.42144 22.03648zM492.58496 141.59872a304.86528 304.86528 0 0 1 33.09568 1.92512 51.11808 51.11808 0 0 0 2.70336-33.9968 345.66144 345.66144 0 0 0-35.79904-1.96608 320.43008 320.43008 0 0 0-36.864 2.12992 51.2 51.2 0 0 0 6.5536 33.50528 280.69888 280.69888 0 0 1 30.3104-1.59744zM612.80256 152.20736a305.27488 305.27488 0 0 0-77.53728-21.62688 61.72672 61.72672 0 0 1-3.64544 13.7216 288.44032 288.44032 0 0 1 73.728 19.90656 47.63648 47.63648 0 0 0 7.45472-12.00128zM677.84704 677.02784a304.49664 304.49664 0 0 0 54.35392-53.248 55.78752 55.78752 0 0 1-11.01824-8.76544 292.00384 292.00384 0 0 1-47.59552 47.55456 52.06016 52.06016 0 0 0 4.25984 14.45888zM449.9456 123.12576a55.21408 55.21408 0 0 1 0-12.73856 324.23936 324.23936 0 0 0-79.95392 20.97152 64.9216 64.9216 0 0 0 2.08896 12.82048 314.9824 314.9824 0 0 1 77.86496-21.05344zM793.27232 345.37472a310.80448 310.80448 0 0 1 10.6496 52.79744 60.8256 60.8256 0 0 0 12.53376-1.31072 323.584 323.584 0 0 0-16.384-72.00768 269.18912 269.18912 0 0 0-6.47168-16.83456 67.01056 67.01056 0 0 1-9.95328 8.84736 292.4544 292.4544 0 0 1 9.6256 28.50816zM449.69984 736.50176a56.60672 56.60672 0 0 1 1.39264-14.04928 284.22144 284.22144 0 0 1-64.9216-17.08032 57.05728 57.05728 0 0 1-5.65248 12.94336 304.29184 304.29184 0 0 0 69.18144 18.18624zM264.35584 615.46496a56.23808 56.23808 0 0 1-10.56768 9.37984 308.96128 308.96128 0 0 0 54.92736 53.248 51.48672 51.48672 0 0 0 6.02112-13.1072 292.864 292.864 0 0 1-50.3808-49.52064zM208.4864 319.77472a302.73536 302.73536 0 0 0-19.78368 78.2336 52.96128 52.96128 0 0 0 14.49984-2.99008A292.08576 292.08576 0 0 1 221.184 325.75488a61.8496 61.8496 0 0 1-12.6976-5.98016zM303.104 193.57696a307.52768 307.52768 0 0 0-53.94432 54.6816 46.81728 46.81728 0 0 0 13.80352 5.07904 294.912 294.912 0 0 1 47.63648-47.96416 54.72256 54.72256 0 0 1-7.49568-11.79648zM190.2592 480.82944a304.86528 304.86528 0 0 0 21.79072 74.9568 51.15904 51.15904 0 0 0 11.91936-7.65952 291.75808 291.75808 0 0 1-19.98848-70.12352 59.02336 59.02336 0 0 1-13.7216 2.82624zM722.57536 253.952a64.43008 64.43008 0 0 0 14.1312-4.75136A305.3568 305.3568 0 0 0 684.032 194.88768a56.32 56.32 0 0 1-7.90528 11.63264A288.27648 288.27648 0 0 1 722.57536 253.952zM781.23008 555.45856a58.24512 58.24512 0 0 0 12.86144 1.96608 320.59392 320.59392 0 0 0 21.2992-79.01184 69.18144 69.18144 0 0 1-12.86144 1.2288 315.84256 315.84256 0 0 1-21.2992 75.81696zM607.47776 701.93152a60.49792 60.49792 0 0 0 15.03232 30.55616 320.22528 320.22528 0 0 0 61.44-35.2256 68.15744 68.15744 0 0 1-15.68768-30.72 291.92192 291.92192 0 0 1-60.78464 35.38944zM543.08864 742.85056c-2.41664 0.36864-4.87424 0.77824-7.33184 1.10592a41.82016 41.82016 0 0 1-2.29376 12.94336 303.104 303.104 0 0 0 38.37952-7.20896 307.73248 307.73248 0 0 0 45.056-14.82752 70.41024 70.41024 0 0 1-7.45472-10.56768 311.296 311.296 0 0 1-66.3552 18.55488zM606.208 717.70112a60.25216 60.25216 0 0 1-4.096-13.5168 290.57024 290.57024 0 0 1-69.05856 18.47296 55.78752 55.78752 0 0 1 2.78528 13.84448 306.33984 306.33984 0 0 0 70.36928-18.80064zM492.58496 725.48352a295.36256 295.36256 0 0 1-35.84-2.29376 50.50368 50.50368 0 0 0-0.73728 19.6608 49.64352 49.64352 0 0 0 4.83328 15.1552c10.48576 0.98304 21.05344 1.51552 31.744 1.51552a332.96384 332.96384 0 0 0 34.48832-1.8432 50.21696 50.21696 0 0 0 2.94912-14.82752 47.84128 47.84128 0 0 0-2.82624-19.456 301.42464 301.42464 0 0 1-34.6112 2.08896zM376.2176 165.72416a65.04448 65.04448 0 0 1-11.6736-32.03072 329.07264 329.07264 0 0 0-62.50496 35.38944 61.44 61.44 0 0 0 13.1072 32.768 293.31456 293.31456 0 0 1 61.07136-36.12672zM803.71712 403.94752a67.3792 67.3792 0 0 1-10.4448-0.8192 50.83136 50.83136 0 0 1-10.73152-2.70336 285.65504 285.65504 0 0 1 1.92512 33.13664 296.38656 296.38656 0 0 1-2.37568 36.864 61.44 61.44 0 0 0 34.07872 1.96608c0.86016-7.168 1.51552-14.45888 1.92512-21.7088a324.68992 324.68992 0 0 0-1.06496-48.128 64.34816 64.34816 0 0 1-13.312 1.39264zM724.74624 610.304a61.44 61.44 0 0 0 30.22848 16.384 323.584 323.584 0 0 0 36.864-63.97952 65.98656 65.98656 0 0 1-32.31744-11.14112 293.10976 293.10976 0 0 1-34.77504 58.73664zM681.20576 683.74528a58.85952 58.85952 0 0 0 7.53664 10.15808 324.07552 324.07552 0 0 0 34.28352-29.9008 319.488 319.488 0 0 0 28.09856-32.03072 74.1376 74.1376 0 0 1-12.288-4.62848 314.20416 314.20416 0 0 1-57.63072 56.40192zM442.5728 742.85056a315.392 315.392 0 0 1-66.31424-18.26816 67.70688 67.70688 0 0 1-8.97024 9.95328 308.96128 308.96128 0 0 0 45.91616 15.1552 322.27328 322.27328 0 0 0 41.28768 7.5776 38.99392 38.99392 0 0 1-4.096-13.23008 163.55328 163.55328 0 0 1-7.82336-1.18784zM203.24352 472.18688a293.15072 293.15072 0 0 1-2.62144-38.62528 308.38784 308.38784 0 0 1 1.76128-32.1536 63.93856 63.93856 0 0 1-17.6128 2.58048h-0.8192a65.1264 65.1264 0 0 1-16.01536-1.96608 334.6432 334.6432 0 0 0-1.51552 31.5392c0 5.7344 0 11.4688 0.53248 17.12128 0.32768 7.65952 1.06496 15.31904 1.96608 22.89664a61.44 61.44 0 0 0 34.32448-1.39264zM258.99008 258.33472a58.28608 58.28608 0 0 1-28.672-18.26816 321.3312 321.3312 0 0 0-35.06176 60.08832 60.53888 60.53888 0 0 0 28.30336 20.19328 293.2736 293.2736 0 0 1 35.4304-62.01344zM184.77056 374.90688A313.01632 313.01632 0 0 1 202.26048 315.392a62.6688 62.6688 0 0 1-9.8304-9.29792l-0.24576 0.53248q-4.7104 11.18208-8.6016 22.69184a324.52608 324.52608 0 0 0-14.82752 66.84672 52.34688 52.34688 0 0 0 12.288 1.96608c1.024-7.7824 2.21184-15.5648 3.72736-23.22432zM299.95008 186.53184a67.21536 67.21536 0 0 1-3.35872-13.5168 321.16736 321.16736 0 0 0-62.8736 62.38208 55.45984 55.45984 0 0 0 9.25696 8.84736 312.81152 312.81152 0 0 1 56.97536-57.71264zM319.488 668.71296a67.91168 67.91168 0 0 1-19.21024 28.09856 325.09952 325.09952 0 0 0 61.07136 35.2256 61.44 61.44 0 0 0 19.41504-28.672 291.38944 291.38944 0 0 1-61.27616-34.65216zM182.8864 481.11616a63.81568 63.81568 0 0 1-13.06624-1.47456 323.584 323.584 0 0 0 22.36416 80.81408 6.47168 6.47168 0 0 0 0.53248 1.06496 55.00928 55.00928 0 0 0 12.53376-2.90816 309.41184 309.41184 0 0 1-22.36416-77.49632zM247.3984 628.736a75.5712 75.5712 0 0 1-11.96032 5.12 318.75072 318.75072 0 0 0 26.58304 30.14656 332.55424 332.55424 0 0 0 33.5872 29.2864 52.224 52.224 0 0 0 8.88832-9.13408A313.9584 313.9584 0 0 1 247.3984 628.736zM226.42688 553.53344a67.21536 67.21536 0 0 1-31.29344 13.43488 322.88768 322.88768 0 0 0 36.49536 62.09536 61.11232 61.11232 0 0 0 29.0816-18.14528 294.66624 294.66624 0 0 1-34.28352-57.38496zM273.36704 347.17696h-34.52928a260.62848 260.62848 0 0 0-5.3248 17.48992h39.85408zM273.36704 328.86784l-15.11424-25.47712A264.76544 264.76544 0 0 0 245.76 329.23648c-1.67936 4.096-3.2768 8.192-4.75136 12.0832h32.52224zM273.36704 370.52416H232.0384a281.6 281.6 0 0 0-3.60448 17.48992h45.056zM273.36704 393.87136H227.45088a276.35712 276.35712 0 0 0-1.96608 17.53088h47.88224zM715.1616 411.40224h44.4416a276.35712 276.35712 0 0 0-1.96608-17.53088H715.1616z"
                      p-id="5079"></path>
                    <path
                      d="M682.06592 244.03968A268.04224 268.04224 0 0 0 258.33472 303.104h468.41856a266.48576 266.48576 0 0 0-44.68736-59.06432zM715.1616 388.01408h41.49248a281.6 281.6 0 0 0-3.60448-17.48992h-37.888zM273.36704 417.25952H225.28a269.18912 269.18912 0 0 0-0.53248 16.384v1.18784h48.61952zM715.1616 364.544h36.41344a269.23008 269.23008 0 0 0-5.3248-17.53088h-31.08864zM715.1616 341.27872h29.0816a175.3088 175.3088 0 0 0-4.75136-12.04224 263.08608 263.08608 0 0 0-12.61568-25.76384l-11.71456 25.3952zM715.1616 504.832h35.75808c1.59744-5.77536 3.072-11.63264 4.096-17.48992h-39.85408zM715.1616 481.4848h40.96c1.024-5.81632 1.88416-11.63264 2.53952-17.53088H715.1616zM715.1616 458.09664h44.2368a247.3984 247.3984 0 0 0 0.98304-17.48992h-45.056zM715.1616 528.384h28.13952c2.21184-5.77536 4.096-11.59168 5.98016-17.48992h-34.11968zM273.36704 440.60672H224.70656c0 5.85728 0.45056 11.71456 0.98304 17.48992h47.67744zM760.0128 417.25952H715.1616v17.48992h45.38368v-1.18784c0-5.48864-0.2048-10.89536-0.53248-16.30208zM273.36704 487.424H229.90848c1.2288 5.85728 2.6624 11.71456 4.096 17.48992h39.19872zM273.36704 463.95392H226.304c0.65536 5.89824 1.51552 11.71456 2.58048 17.53088h44.48256zM273.36704 510.68928h-37.51936c1.76128 5.89824 3.72736 11.71456 5.9392 17.48992h31.58016zM715.1616 547.51232l8.192 22.03648a266.89536 266.89536 0 0 0 15.9744-31.70304l1.51552-3.80928h-25.68192zM303.104 623.04256a267.75552 267.75552 0 0 0 379.00288 0 269.14816 269.14816 0 0 0 40.96-52.30592H263.3728a267.8784 267.8784 0 0 0 39.7312 52.30592z m188.416 25.92768a185.7536 185.7536 0 0 0 5.9392-22.20032 46.12096 46.12096 0 0 0 4.62848 1.80224c-1.76128 7.00416-3.60448 14.25408-5.44768 21.9136z m111.04256 1.67936a70.36928 70.36928 0 0 1-21.7088-6.26688 84.41856 84.41856 0 0 1-21.9136 6.9632 46.98112 46.98112 0 0 0-2.37568-4.096 87.04 87.04 0 0 0 19.94752-5.3248 36.53632 36.53632 0 0 1-10.11712-9.58464h-4.75136v-3.76832h35.88096v3.72736a54.02624 54.02624 0 0 1-12.04224 9.66656 68.68992 68.68992 0 0 0 19.33312 4.3008z m-13.5168-39.69024V606.208h4.34176v4.83328h10.40384v3.76832h-10.40384v11.01824h-4.34176v-2.00704h-16.384v2.048h-4.096v-11.0592h-8.6016v-3.76832h8.6016V606.208h4.096v4.83328z m-34.77504 10.93632v-20.97152h23.7568c-0.94208-1.6384-1.8432-3.2768-2.8672-4.87424l4.096-1.96608a76.1856 76.1856 0 0 1 4.096 6.84032h21.01248v4.096h-45.8752v17.24416a46.4896 46.4896 0 0 1-7.5776 29.16352 81.18272 81.18272 0 0 0-3.23584-3.8912 41.94304 41.94304 0 0 0 6.38976-25.64096z m-47.5136-18.51392h15.31904a70.12352 70.12352 0 0 0 1.92512-8.84736l4.42368 0.73728a149.74976 149.74976 0 0 1-2.00704 8.192h17.89952v10.69056h-4.38272v-6.59456h-14.70464a86.54848 86.54848 0 0 0 5.48864 17.85856 79.17568 79.17568 0 0 0 9.6256-8.88832l3.6864 3.072a184.32 184.32 0 0 1-11.4688 9.37984 38.21568 38.21568 0 0 0 14.17216 13.80352 30.47424 30.47424 0 0 0-4.096 3.8912 49.9712 49.9712 0 0 1-19.98848-32.768 46.61248 46.61248 0 0 1-4.99712 9.4208v20.48c3.76832-1.6384 7.45472-3.44064 11.14112-5.40672v4.95616a147.94752 147.94752 0 0 0-12.0832 5.98016l-2.37568 1.72032-2.78528-4.096a5.40672 5.40672 0 0 0 1.92512-4.096v-13.84448a102.15424 102.15424 0 0 1-8.97024 9.74848 51.6096 51.6096 0 0 0-2.99008-3.6864 69.91872 69.91872 0 0 0 19.16928-27.56608h-9.70752v6.59456h-4.38272z m-11.83744-7.65952c2.21184 1.76128 5.24288 4.42368 8.97024 7.86432l-3.39968 3.39968a121.93792 121.93792 0 0 0-8.6016-8.192z m-2.33472 14.70464a121.97888 121.97888 0 0 1 9.91232 7.33184c-1.47456 1.55648-2.58048 2.82624-3.35872 3.6864a171.13088 171.13088 0 0 0-9.46176-7.7824z m-28.672-15.48288h4.096v11.59168h18.26816v4.096h-14.58176a46.73536 46.73536 0 0 0 16.384 25.51808c-1.26976 1.55648-2.37568 3.03104-3.35872 4.096a53.248 53.248 0 0 1-16.83456-29.77792v24.41216h8.43776v4.096h-8.43776v11.91936h-4.096V638.976h-8.3968v-4.096h8.3968v-24.1664a61.44 61.44 0 0 1-17.57184 30.72 78.68416 78.68416 0 0 0-3.03104-3.64544 60.90752 60.90752 0 0 0 16.384-27.07456h-13.43488v-4.096h17.6128z m-20.76672-0.2048l4.096 1.2288a116.736 116.736 0 0 1-4.99712 13.7216v41.1648h-4.096v-32.3584a96.62464 96.62464 0 0 1-5.48864 8.76544 46.85824 46.85824 0 0 0-1.96608-4.66944 90.112 90.112 0 0 0 12.36992-27.8528z m-14.86848 50.5856c-0.86016 3.76832-2.62144 5.61152-5.3248 5.61152a5.48864 5.48864 0 0 1-4.95616-3.6864 48.41472 48.41472 0 0 1-3.56352-21.38112v-2.2528h-36.08576v-4.096h40.5504v5.98016a43.70432 43.70432 0 0 0 3.11296 19.41504c0.94208 1.4336 1.6384 1.26976 2.08896-0.45056a77.824 77.824 0 0 0 1.18784-10.0352c1.39264 0.45056 2.74432 0.86016 4.096 1.18784a68.36224 68.36224 0 0 1-1.18784 9.70752zM384.73728 614.4v-4.096h37.2736v4.096z m0-19.8656l4.62848 1.39264a50.91328 50.91328 0 0 1-1.96608 5.12h39.03488v4.096h-40.96a76.43136 76.43136 0 0 1-11.42784 17.77664 63.8976 63.8976 0 0 0-1.76128-5.24288 70.57408 70.57408 0 0 0 12.36992-23.26528zM273.32608 534.03648H244.1216c0.45056 1.26976 0.90112 2.58048 1.4336 3.85024a265.17504 265.17504 0 0 0 17.57184 32.3584l10.19904-22.85568z"
                      p-id="5080"></path>
                    <path
                      d="M262.92224 570.73664h0.45056l-0.24576-0.49152-0.2048 0.49152zM572.57984 614.72768h16.22016v5.3248h-16.22016zM570.94144 632.25856a36.2496 36.2496 0 0 0 9.8304 7.53664 43.66336 43.66336 0 0 0 10.60864-7.53664zM528.384 350.4128h30.72a2.94912 2.94912 0 0 1 2.94912 2.94912v13.9264a2.90816 2.90816 0 0 1-2.90816 2.90816H528.384a2.90816 2.90816 0 0 1-2.90816-2.90816v-13.9264a2.94912 2.94912 0 0 1 2.90816-2.94912zM347.25888 364.7488h10.24v4.13696h-10.24zM657.408 351.76448h13.1072v1.31072h-13.1072zM657.408 349.26592h13.1072v1.31072h-13.1072zM422.5024 356.43392h6.92224v2.29376h-6.92224zM421.888 363.97056a17.98144 17.98144 0 0 0 4.096 3.23584 20.11136 20.11136 0 0 0 4.54656-3.23584zM579.70688 358.03136h7.00416v4.13696h-7.00416zM403.98848 360.12032h4.3008v3.4816h-4.3008z"
                      p-id="5081"></path>
                    <path
                      d="M709.30432 545.62816V330.83392H279.26528v214.79424zM359.58784 359.13728v1.6384h-14.45888v-1.6384z m-14.45888-2.29376v-1.67936h14.45888v1.67936z m2.12992 13.7216v1.51552h-1.8432v-8.97024h13.9264v8.97024h-1.8432v-1.51552z m254.85312-0.73728a61.44 61.44 0 0 0 2.82624-8.97024 21.05344 21.05344 0 0 0 2.12992 0.98304l-2.78528 8.97024z m53.6576-21.66784h16.384v7.00416h-1.6384v-0.8192h-13.1072v0.65536h-1.6384z m-3.76832 7.53664h23.83872v1.31072h-23.9616z m0 13.43488h11.30496v-1.55648h-9.8304v-1.2288h9.8304v-1.47456h-5.89824v0.65536h-1.6384v-7.49568h16.83456v7.49568h-1.72032v-0.65536h-6.10304v1.47456h9.8304v1.2288h-9.8304v1.39264h11.0592v1.31072h-24.20736z m-23.92064-18.71872h9.0112v-3.2768h2.048v3.11296h9.09312v13.76256H638.976v2.90816q0 1.47456 1.59744 1.47456h5.7344c1.10592 0 1.76128-0.36864 2.048-1.14688a20.48 20.48 0 0 0 0.53248-3.44064l2.048 0.8192a44.6464 44.6464 0 0 1-0.65536 3.35872 3.072 3.072 0 0 1-3.39968 2.2528h-6.43072a3.072 3.072 0 0 1-3.52256-3.39968v-2.82624h-7.00416v1.72032h-2.00704z m-18.10432-0.28672h1.92512v4.5056l4.096-0.94208v-6.63552h1.92512v6.02112l6.51264-1.4336c0 3.60448-0.2048 6.10304-0.24576 7.49568a5.57056 5.57056 0 0 1-0.73728 2.90816 2.82624 2.82624 0 0 1-2.29376 0.77824h-2.00704a13.23008 13.23008 0 0 0-0.32768-2.048 10.97728 10.97728 0 0 0 2.2528 0.2048c0.73728 0 1.18784-0.65536 1.26976-1.8432s0-2.62144 0-5.20192l-4.54656 1.06496v10.8544h-1.92512v-10.48576l-4.096 0.98304v10.15808a1.67936 1.67936 0 0 0 1.92512 1.88416h7.65952a1.88416 1.88416 0 0 0 2.08896-1.67936c0.2048-0.86016 0.32768-2.08896 0.53248-3.80928 0.65536 0.24576 1.31072 0.53248 2.048 0.73728a34.03776 34.03776 0 0 1-0.73728 4.096 3.15392 3.15392 0 0 1-3.4816 2.6624h-8.51968a3.03104 3.03104 0 0 1-3.44064-3.44064v-10.11712l-1.96608 0.36864-0.32768-1.76128 2.29376-0.53248z m-5.85728-2.49856c1.59744 1.26976 3.03104 2.37568 4.096 3.44064a19.98848 19.98848 0 0 1-1.4336 1.55648c-1.26976-1.18784-2.58048-2.41664-4.096-3.6864z m-1.18784 6.26688a50.5856 50.5856 0 0 1 4.096 3.35872l-1.39264 1.59744a62.34112 62.34112 0 0 0-4.096-3.52256z m-25.3952-3.64544h9.05216v-3.11296h2.048v3.11296h9.0112v13.76256h-9.0112v2.90816c0 0.98304 0.49152 1.47456 1.55648 1.47456h5.7344c1.14688 0 1.80224-0.36864 2.048-1.14688a20.48 20.48 0 0 0 0.53248-3.44064l2.048 0.8192c0 1.2288-0.4096 2.37568-0.65536 3.35872a3.03104 3.03104 0 0 1-3.35872 2.2528h-6.5536a3.03104 3.03104 0 0 1-3.39968-3.39968v-2.82624h-7.00416v1.72032h-2.048z m-54.59968 3.072a5.44768 5.44768 0 0 1 5.44768-5.40672h30.67904a5.48864 5.48864 0 0 1 5.48864 5.40672V356.352a1.67936 1.67936 0 0 1 1.55648 1.72032v4.096a1.72032 1.72032 0 0 1-1.55648 1.72032v3.35872a5.48864 5.48864 0 0 1-5.48864 5.40672H528.384a5.44768 5.44768 0 0 1-5.44768-5.40672z m-87.81824 18.47296a30.39232 30.39232 0 0 1-9.29792-2.62144 37.10976 37.10976 0 0 1-9.37984 2.94912 16.384 16.384 0 0 0-0.98304-1.76128 36.20864 36.20864 0 0 0 8.51968-2.33472 16.384 16.384 0 0 1-4.34176-4.096H417.792v-1.6384h15.40096v1.59744a20.72576 20.72576 0 0 1-5.24288 4.096 27.27936 27.27936 0 0 0 8.192 1.88416z m-5.81632-16.95744v-2.08896h1.92512v2.08896h4.42368V356.352h-4.42368v4.66944h-1.92512V360.448h-6.92224v0.94208h-1.72032V356.352h-3.60448v-1.51552h3.60448v-2.08896h1.8432v2.08896z m-14.86848 4.62848v-8.97024h10.19904c-0.4096-0.65536-0.77824-1.39264-1.2288-2.048l1.8432-0.86016a36.90496 36.90496 0 0 1 1.6384 2.90816h9.05216V352.256h-19.61984v7.3728a20.02944 20.02944 0 0 1-3.23584 12.53376 15.85152 15.85152 0 0 0-1.35168-1.6384 17.85856 17.85856 0 0 0 2.82624-11.0592z m-16.62976 5.85728v0.94208h-1.67936v-7.7824h6.02112v-2.70336h-3.23584v0.98304h-1.8432v-7.5776h12.00128v7.5776h-1.8432v-0.98304h-3.23584v2.70336h6.06208v6.84032h-6.06208v3.52256h4.096a20.19328 20.19328 0 0 0-0.94208-1.88416l1.6384-0.77824c1.024 1.72032 1.88416 3.44064 2.70336 5.16096L409.6 372.1216l-0.86016-1.76128-13.59872 0.90112-0.24576-2.048c2.41664 0 4.79232 0 7.12704-0.24576v-3.64544zM387.4816 351.0272v-1.72032h7.41376v8.51968H393.216V356.7616h-3.39968l-0.4096 3.85024h5.20192c0 3.4816-0.24576 5.98016-0.36864 7.5776s-1.26976 3.35872-3.39968 3.35872h-2.62144a12.04224 12.04224 0 0 0-0.4096-1.96608h2.78528a1.6384 1.6384 0 0 0 1.76128-1.72032c0-1.72032 0-3.56352 0.32768-5.7344h-5.24288l0.77824-7.12704H393.216v-4.096z m-21.83168-2.048h16.71168v8.192h-2.00704v-1.14688h-12.6976v1.18784h-2.00704z m-3.76832 9.50272h24.28928V360.448h-16.95744l-1.06496 2.58048h14.66368l-0.53248 4.62848a4.096 4.096 0 0 1-4.62848 4.096h-6.06208c0-0.53248 0-1.26976-0.36864-2.12992 2.29376 0.2048 4.34176 0.28672 6.10304 0.28672a2.6624 2.6624 0 0 0 2.99008-2.37568c0-0.6144 0-1.47456 0.32768-2.58048H366.1824v-2.17088l1.06496-2.33472h-5.36576z m-9.99424-10.69056l1.76128 2.82624-1.10592 0.53248h8.47872v1.72032h-17.24416v-1.72032h8.192l-1.76128-2.49856z m-9.78944 0l1.92512 0.53248c-0.73728 2.17088-1.51552 4.096-2.29376 6.06208v17.6128H339.968v-13.9264a31.1296 31.1296 0 0 1-2.37568 3.64544l-0.8192-2.048a41.24672 41.24672 0 0 0 5.3248-11.79648z m-15.07328-0.86016h3.80928v28.42624h-3.80928z m-5.89824 5.7344h3.85024v22.69184H321.1264z m-5.7344 5.61152h3.6864v17.08032H315.392z m-5.85728 5.61152h3.80928v11.4688h-3.93216z"
                      p-id="5082"></path>
                    <path
                      d="M579.70688 352.09216h7.00416v4.13696h-7.00416zM367.65696 350.78144h12.73856v3.56352h-12.73856zM397.9264 360.12032h4.21888v3.4816h-4.21888zM398.90944 350.90432h8.31488v3.23584h-8.31488zM657.2032 362.04544h5.85728v1.59744h-5.85728zM664.7808 359.26016h5.85728v1.59744h-5.85728zM638.93504 352.09216h7.04512v4.13696h-7.04512zM657.2032 359.26016h5.85728v1.59744h-5.85728zM664.7808 362.04544h5.85728v1.59744h-5.85728zM588.75904 358.03136h7.04512v4.13696h-7.04512zM629.88288 358.03136h7.00416v4.13696h-7.00416zM588.75904 352.09216h7.04512v4.13696h-7.04512zM638.93504 358.03136h7.04512v4.13696h-7.04512zM629.88288 352.09216h7.00416v4.13696h-7.00416z"
                      p-id="5083"></path>
                  </svg>
                  <div style="padding: 10px;background-color: #f2f2f2" @click.stop="tableQuery(item)">
                    <el-row style="margin-bottom: 5px;border-bottom: 1px solid #8f939c;">
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 15px">设备品牌
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 15px">检测范围
                      </el-col>
                      <el-col :span="8" class="row-item" style="flex: 1; text-align: center;font-size: 15px">栏舍编码
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px;">
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;font-size: 15px;word-break: break-all;word-wrap: break-word;">
                        {{ item.gasBrand ? item.gasBrand : '—' }}
                      </el-col>
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;font-size: 15px;word-break: break-all;word-wrap: break-word;">
                        {{ item.gasRange ? item.gasRange : '—' }}
                      </el-col>
                      <el-col :span="8" class="row-item"
                              style="flex: 1; text-align: center;font-size: 15px;word-break: break-all;word-wrap: break-word;">
                        {{ item.phouseCode ? item.phouseCode : '—' }}
                      </el-col>
                      <el-col style="display: none">{{ item.fansId }}</el-col>
                    </el-row>
                  </div>

                </el-card>
              </div>

            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2" style="margin-top: 100px">
        <svg class="icon" height="100" p-id="6924" t="1708502371103" version="1.1"
             viewBox="0 0 1024 1024" width="64" xmlns="http://www.w3.org/2000/svg" @click="goright">
          <path
            d="M277.845333 1006.933333c-7.850667 0-16.042667-3.072-21.845333-9.216a30.788267 30.788267 0 0 1 0.341333-43.690666l445.781334-441.002667L256 69.973333a30.788267 30.788267 0 0 1 0-43.690666c11.946667-11.946667 31.744-12.288 43.690667 0L768 491.178667c5.802667 5.802667 9.216 13.653333 9.216 21.845333s-3.413333 16.042667-9.216 21.845333L299.690667 998.058667c-6.144 5.802667-13.994667 8.874667-21.845334 8.874666z"
            fill="#dbdbdb" p-id="6925"></path>
        </svg>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11">

        <div style="margin-left: 50px;">
          <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="messageParams" size="small">
            <el-form-item label="栏舍编码" prop="queryParams">
              <el-select v-model="messageParams.equipmentPhouseCode" clearable filterable placeholder="请输入设备编码"
                         @change="tableQuery"
              >
                <el-option

                  v-for="item in parkList"
                  :key="item.equipmentPhouseCode"
                  :label="item.equipmentPhouseCode"
                  :value="item.equipmentPhouseCode"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetTable">重置</el-button>
            </el-form-item>
          </el-form>
          <div style="height: 300px; overflow-y: auto; ">
            <el-table
              v-loading="tableLoading"
              :data="messageList"
              height="300"
              style="width: 100%">
              <el-table-column
                fixed
                label="栏舍编码"
                prop="equipmentPhouseCode"
                width="150">
              </el-table-column>
              <el-table-column
                label="栏舍类型"
                prop="phouseType"
                width="100">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.hmy_park_type" :value="scope.row.phouseType"/>
                </template>
              </el-table-column>
              <el-table-column
                label="氨气浓度"
                prop="equipmentAmmonia"
                width="100">
                <template slot-scope="scope">
                  {{ scope.row.equipmentAmmonia + ' ppm' }}
                </template>
              </el-table-column>
              <el-table-column
                label="时间"
                prop="creationDate"
                width="150">
                <template slot-scope="scope">
                  {{ scope.row.creationDate.slice(0, 16) }}
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <div ref="chart" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
    </el-row>
    <!--      保留编辑和删除-->
    <div
      v-if="contextMenuVisible"
      class="context-menu"
      :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"
    >
      <ul>
        <li @click="handleUpdate">编辑</li>
        <li @click="handleDelete">删除</li>
      </ul>
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备品牌" prop="gasBrand">
          <el-input v-model="form.gasBrand" placeholder="请输入设备品牌"/>
        </el-form-item>
        <el-form-item label="设备型号" prop="gasModel">
          <el-input v-model="form.gasModel" placeholder="请输入设备型号"/>
        </el-form-item>
        <el-form-item label="设备类型" prop="gasType">
          <el-select
            v-model="form.gasType"
            placeholder="设备类型"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.hmy_gas_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="栏舍编码" prop="queryParams">
          <el-select v-model="form.phouseCode" clearable filterable placeholder="请输入设备编码" style="width: 240px">
            <el-option

              v-for="item in parkCodeList"
              :key="item.phouseCode"
              :label="item.phouseCode"
              :value="item.phouseCode"/>
          </el-select>
        </el-form-item>
        <el-form-item label="检测范围" prop="gasRange">
          <el-input v-model="form.gasRange" placeholder="请输入检测范围"/>
        </el-form-item>
        <el-form-item label="设备状态" prop="gasState">
          <el-radio-group v-model="form.gasState">
            <el-radio
              v-for="dict in dict.type.hmy_gas_state"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addGas, delGas, editGas, listGas, listGasById} from "@/api/hmy/gas"
import {findPhouseCode, findPhouseCodeAll, listEquipment} from "@/api/hmy/equipment";
import * as echarts from "echarts";

export default {
  name: "Gas",
  dicts: ['sys_normal_disable', 'hmy_gas_state', 'hmy_gas_type', 'hmy_gas_object', 'hmy_park_type'],
  data() {
    return {
      intervalId: null, // 用于存储定时器ID的变量
      tableLoading: true,//表格遮罩
      parkCodeList: [],
      parkList: [],
      messageList: [],
      messageParams: {
        pageNum: 1,
        pageSize: 999,
        equipmentPhouseCode: ""
      },
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      selectedContextItem: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 气体检测仪表格数据
      gasList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        gasBrand: undefined,
        gasModel: undefined,
        gasState: undefined,
        beginTime: undefined,
        endTime: undefined
      },
      // 表单参数
      form: {},
      rules: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    /** 查询环境信息 */
    // 组件挂载后开始轮询
    this.startPolling();
  },
  beforeDestroy() {
    // 组件销毁前停止轮询
    this.stopPolling();
  },
  methods: {
    fetchEquipment() {
      // 查询环境信息的方法
      listEquipment(this.messageParams).then(response => {
        this.messageList = response.rows;
        console.log(this.messageList);
        this.initChart();
      }).catch(error => {
        // 处理错误情况
        console.error('获取设备列表失败:', error);
      });
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
        }
      );
    },
    startPolling() {
      // 启动轮询的方法
      this.fetchEquipment(); // 首次立即执行
      this.intervalId = setInterval(this.fetchEquipment, 1000 * 5); // 每5秒执行一次
    },
    stopPolling() {
      // 停止轮询的方法
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    filteredParkCodeList() {
      return this.parkCodeList.filter(parkCode => {
        return !this.gasList.some(park => park.phouseCode === parkCode.phouseCode);
      });
    },
    resetTable() {
      this.messageParams.equipmentPhouseCode = ""
      this.tableQuery()
    },
    tableQuery(item) {
      console.log(item)
      if (item != null) {
        if (item.phouseCode != null) {
          this.messageParams.equipmentPhouseCode = item.phouseCode
        }
      }
      listEquipment(this.messageParams).then(response => {
          this.initChart();
        }
      );
    },
    initChart() {
      console.log(this.filteredParkCodeList())
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart);
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '氨气浓度',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom:
          {
            show: true,
            realtime: true,
            start: 0,
            end: 5,
            xAxisIndex: [0, 1] // 控制两个 xAxis 的 dataZoom
          },
        xAxis: {
          data: this.messageList.map(item => item.creationDate)
        },
        yAxis:
          {
            name: '氨气浓度(ppm)',
            type: 'value',
            min: 0

          },
        series: this.seriesData()
      };
      this.tableLoading = false
      myChart.setOption(option);
    }, /** 动态生成折线图*/
    /** 动态生成折线图系列 */
    seriesData() {
      let series = [];
      this.parkList.forEach(cloud => {
        // 筛选出具有相同设备站房代码的messageList项
        const messageItems = this.messageList.filter(item => item.equipmentPhouseCode === cloud.equipmentPhouseCode);
        // 生成温度数据系列
        const temperatureSeries = {
          name: '氨气浓度 - ' + cloud.equipmentPhouseCode,
          type: 'line',
          symbolSize: 8,
          data: messageItems.map(item => item.equipmentAmmonia)
        };

        // 将生成的温度和湿度系列添加到系列数组中
        series.push(temperatureSeries);
      });
      return series;
    },
    goright() {
      this.initChart()
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft += 240;
    },
    goleft() {

      const container = this.$el.querySelector('.scroll-container');
      container.scrollLeft -= 240;
    },
    handleWheel(event) {
      // 阻止默认的滚动行为
      event.preventDefault();
      // 获取滚动容器
      const container = this.$el.querySelector('.scroll-container');
      // 计算滚动距离
      const scrollAmount = event.deltaY;
      // 应用滚动距离到滚动容器的横向滚动
      container.scrollLeft += scrollAmount;
    },
    icoeUp(d) {
      if (d.gasState === '1') {
        d.gasState = '2'
      } else {
        d.gasState = '1'
      }
      editGas({"gasState": d.gasState, "gasId": d.gasId}).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    showDetails(item) {
      listGasById(item.gasId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看气体检测仪信息";
      });
    },
    /*右键显示*/
    showContextMenu(event, item) {
      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.selectedContextItem = item;
      this.contextMenuVisible = true;
    },
    /*关闭*/
    hideContextMenu() {
      this.contextMenuVisible = false;
    },
    /** 查询气体检测仪列表 */
    getList() {
      this.loading = true;
      /** 查询气体检测仪列表 */
      this.queryParams.beginTime = this.dateRange[0]
      this.queryParams.endTime = this.dateRange[1]
      listGas(this.queryParams).then(res => {
        this.gasList = res.rows
        this.total = res.total;
      });
      /** 查询环境信息 */
      listEquipment(this.messageParams).then(response => {
          this.messageList = response.rows;
          console.log(this.messageList)
          this.initChart();
        }
      );
      /** 栏舍下拉选择 */
      findPhouseCode().then(response => {
          this.parkList = response.data;
          this.loading = false;
        }
      );
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        gasId: undefined,
        gasModel: undefined,
        gasBrand: undefined,
        gasType: undefined,
        gasRange: undefined,
        gasObject: undefined,
        gasState: "1",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.gasId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },


    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加设备";
      findPhouseCodeAll().then(response => {
        this.parkCodeList = response.data;
        this.parkCodeList = this.filteredParkCodeList()
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const item = this.selectedContextItem;
      listGasById(item.gasId).then(res => {
        this.form = res.data;
        this.open = true;
        this.title = "修改设备";
      })
      this.hideContextMenu();
    },

    /** 提交按钮 */
    submitForm: function () {
      if (this.form.gasId != undefined) {
        console.log(this.form)
        editGas(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addGas(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const item = this.selectedContextItem;
      this.$modal.confirm('是否确认删除设备编号为"' + item.gasId + '"的数据项？').then(function () {
        return delGas(item.gasId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
      this.hideContextMenu();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<!--添加样式-->
<style scoped>
.scroll-container {
  scroll-behavior: smooth;
  overflow-x: auto; /* 启用横向滚动 */
  white-space: nowrap; /* 防止内部元素换行 */
  margin: 0 auto; /* 覆盖因为 gutter 导致的外边距问题 */
  position: relative;
  max-height: 100%; /* 设置一个最大高度 */
  overflow: hidden; /* 隐藏原生滚动条 */
}

.table-body {
  display: flex; /* 使用 flex 布局 */
  flex-wrap: nowrap; /* 防止子元素换行 */
  margin: 20px 0; /* 根据需要调整内边距 */
}

.table-body .el-col {
  flex: 0 0 auto; /* 避免 flex 子项被压缩 */
  white-space: normal; /* 使列内的内容正常换行 */
}

.emessage-div {
  transition: transform 0.3s; /* 设置动画过渡效果 */
}

.emessage-div:hover {
  transform: scale(1.1); /* 鼠标悬浮时放大1.5倍 */
}

.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

.parent-icon {
  position: relative;
}

.green-icon {
  position: absolute;
  right: 15px;
  top: 15px;
  color: green;
  z-index: 9;
  font-size: 20px;
}

.rea-icon {
  position: absolute;
  right: 15px;
  top: 15px;
  color: red;
  z-index: 9;
  font-size: 20px;
}

</style>
